<template>
  <div 
    :id="id"
    :style="{width: width + 'px', height: height + 'px', margin: '34px auto'}"
    class="m-map"
  >
  </div>
</template>

<script>
  export default {
    props: {
      width: {
        type: Number,
        default: 300
      },
      height: {
        type: Number,
        default: 300
      },
      point: {
        type: Array,
        default(){
          return [116.46,39.92]
        }
      }
    },
    data(){
      return{
        id: `map`,
        key: '455be4fa8051f21ee7464595da7031ca'
      }
    },
    watch: {
      point(val, old){
        this.map.setCenter(val)
        this.marker.setPosition(val)
      }
    },
    mounted(){
      const _this = this
      _this.id = `map${Math.random().toString().slice(4, 6)}`

      window.onmaploaded = () => {
        let map = new window.AMap.Map(_this.id, {
          resizeEnable: true,
          zoom: 11,
          center: _this.point
        })
        _this.map = map
        window.AMap.plugin('AMap.ToolBar', () => {
          let toolbar = new window.AMap.ToolBar()
          map.addControl(toolbar)
          let marker = new window.AMap.Marker({
            icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
            position: _this.point
          })
          _this.marker = marker
          marker.setMap(map)
        })
      }
      const url = `https://webapi.amap.com/maps?v=1.4.14&key=${_this.key}&callback=onmaploaded`
      let jsapi = document.createElement('script')
      jsapi.charset = 'utf-8'
      jsapi.src = url
      document.head.appendChild(jsapi)
    }
  }
</script>

<style lang="scss">

</style>